<template>
  <div class="personal-box">
    <div class="up">
      <div class="goback">
        <span class="iconfont icon-zuojiantou"></span>
        <span>...</span>
      </div>
      <div class="person">
        <div class="avater"></div>
        <div>
          <h3>用户123456</h3>
          <p>加入得物370天</p>
        </div>
      </div>
      <p class="visitor">近期访客0人</p>
      <p class="signature">未设置签名</p>
      <div class="reap">
        <ul class="reap-left">
          <li>
            <span>0</span>
            <p>获赞与收藏</p>
          </li>
          <li>
            <span>0</span>
            <p>粉丝</p>
          </li>
          <li>
            <span>0</span>
            <p>关注</p>
          </li>
        </ul>
        <div class="reap-right">编辑资料</div>
      </div>
    </div>
    <div class="down">
      <div class="option">
        <ul class="option-item">
          <li>动态</li>
          <li>收藏</li>
          <li>赞过</li>
        </ul>
      </div>
      <div class="option-con">
        <h4 class="sharelife">开始分享你的潮流生活</h4>
        <p class="p">
          参与以下任一话题，并发布2图15字以上的图文动态,或15秒以上的视频可获津贴奖励
        </p>

        <ul class="topic">
          <li>
            <div>
              <img src="../../../assets/imgs/1_03.png" alt="" />
              <span class="topic-name">今日份穿搭</span>
            </div>
            <span class="release">去发布</span>
          </li>
          <li>
            <div>
              <img src="../../../assets/imgs/1_06.gif" alt="" />
              <span class="topic-name">我的宝藏单品</span>
            </div>
            <span class="release">去发布</span>
          </li>
          <li>
            <div>
              <img src="../../../assets/imgs/1_08.gif" alt="" />
              <span class="topic-name">潮流生活记录</span>
            </div>
            <span class="release">去发布</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
@import url("@/assets/iconfont/iconfont.css");
.up {
  width: 100%;
  height: 2.63rem;
  padding: 0.46rem 0.16rem 0;
  background-color: #666;
}

.goback {
  height: 0.2rem;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 0.2rem;
}
.person {
  height: 0.64rem;
  display: flex;
  margin-top: 0.11rem;
}

.person .avater {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background-color: #d9d9d9;
  color: #fff;
}

.person h3 {
  font-weight: normal;
  margin: 0.15rem 0 0.09rem 0.09rem;
  color: #fff;
}

.person p {
  font-size: 0.12rem;
  margin-left: 0.09rem;
  color: #fff;
}
.visitor {
  font-size: 0.12rem;
  color: #fff;
  margin-top: 0.15rem;
}
.signature {
  font-size: 0.14rem;
  color: #fff;
  margin-top: 0.03rem;
}
.reap {
  height: 0.3rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.22rem;
}

.reap-left {
  width: 1.35rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.reap-left span {
  font-size: 0.14rem;
  color: #fff;
}

.reap-left p {
  font-size: 0.12rem;
  color: #97969b;
}
.reap-right {
  width: 0.8rem;
  height: 0.29rem;
  background-color: #463e53;
  color: #fff;
  text-align: center;
  line-height: 0.29rem;
}
.option-con {
  padding: 0 0.28rem;
}
.option {
  width: 100%;
  height: 0.44rem;
  border: solid 1px #f3f3f3;
}
.option-item {
  width: 1.86rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  line-height: 0.44rem;
  font-size: 0.14rem;
}
.sharelife {
  padding-top: 1.62rem;
  font-size: 0.14rem;
  color: #807f87;
  text-align: center;
  font-weight: normal;
}
.p {
  color: #a7a6ac;
  font-size: 0.12rem;
  line-height: 0.15rem;
  margin: 0.16rem 0 0.09rem;
}
.topic li {
  height: 0.4rem;
  line-height: 0.4rem;
  background-color: #f4f3f8;
  margin-bottom: 0.08rem;
  position: relative;
}

.topic li .topic-name{
    position: absolute;
    font-size: .12rem;
    color: #545358;
    height: 100%;
    line-height: .4rem;
    margin-left: .07rem;
}

.topic li .release{
    position: absolute;
    width: .47rem;
    height: .24rem;
    line-height: .24rem;
    text-align: center;
    background-color: #545358;
    color: #18bdbf;
    right: .07rem;
    top: .08rem;
    font-size: .12rem;
}
</style>